<template>
    <div>
        <div style="display: flex;">
        	
            <div style="margin-right:20px;">
                
        		<el-button @click="newAdd" size="mini" type="primary">新增</el-button>
				<el-button @click="delOrder(false)" 
					:disabled="!isDelete && !is_jc"
					size="mini" type="primary">删除</el-button>
        		<el-button  @click="saveGoods" 
					:loading="loading_btn"
					size="mini" type="primary">保存</el-button>
        		<el-button  size="mini" @click="prevNextBtn(0,1)" type="primary">上一条</el-button>
        		<el-button   size="mini" @click="prevNextBtn(0,2)" type="primary">下一条</el-button>
        		
            </div>
        	<div style="margin-top: 2px;">
        		<el-checkbox v-model="orderChecked" 
					:disabled="order=='new'"
					border size="mini">保存后新增</el-checkbox>
        	</div>
			<div style="margin-top: 2px;margin-left: 10px;">
				<el-checkbox v-model="is_jc" border size="mini">寄存商品</el-checkbox>
			</div>
        </div>
        <br>
        <div class="searchForm">
			<div >
			    单号： 
				<el-input size="small" v-model="order"
				placeholder="请输入单号" disabled
				style="width:150px;"></el-input>
			</div>
            <div>
                退货日期： 
				<el-date-picker
				      size="small"
				      v-model="form.buyer_date"
					  :disabled="(!isDelete && !is_jc) || isUpdateOrderDate!=1"
					  value-format="yyyy-MM-dd"
				      type="date"
				      placeholder="选择日期时间">
				    </el-date-picker>
            </div>
            <div>
                制单人： 
				<el-input size="small" v-model="form.buyer_person" 
				disabled
				placeholder="请输入制单人"  
				style="width:150px;"></el-input>
            </div>
            <div>
                <div style="display: flex;">
                	<div>
                		供应商：
                	</div>
					<div v-if="!isDelete && !is_jc">
						<el-input size="small" v-model="form.supplier"
						placeholder="请输入供应商" disabled
						style="width:150px;"></el-input>
					</div>
					<div v-else>
						<selectCustomer 
							:supp="form.supplier" 
							@getCustomerName="getCustomerName" />
					</div>
                </div>
            </div>
			<div>
			    物流单号： <el-input size="small" 
				v-model="form.logistics_number" 
				placeholder="请输入物流单号"  
				style="width:150px;"></el-input>
			</div>
        </div>
		<div style="margin: 15px 0;">
			<el-button  @click="addBtn" size="mini" type="warning">增加行</el-button>
			<!-- <el-button  @click="delRow" size="mini" type="warning">删除行</el-button> -->
			<el-button  @click="delLastList"  size="mini" type="warning">删除后行</el-button>
			<!-- <el-button @click="copyRow"  size="mini" type="warning">复制行</el-button> -->
		</div>
        <el-table  :data="list"  
			 border  
			 style="width: 1500px"
			>
			<el-table-column  label="操作"    align="center">
			      <template slot-scope="scope">
			          <i class="el-icon-delete" 
						v-if="scope.row.is_disabld!=1"
						style="cursor: pointer;" 
								@click="delRow(scope)"></i>
					 <i v-else>--</i>
			      </template>
			  </el-table-column>
			<el-table-column   align="center"  width="80"
				label="序号">
				<template slot-scope="scope">
				   <div>
						{{scope.$index+1}}
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center"  width="200px"   label="串号">
				<template slot-scope="scope">
				   <div>
				   	  <el-input @change="changeCodeInput(scope)"  size="mini" v-model="scope.row.code"></el-input>
				   </div>
				</template>
			</el-table-column>	
            <el-table-column   align="center"  width="500px"   
				label="商品名称">
				<template slot-scope="scope">
				   <div>
						<el-input disabled  size="mini" v-model="scope.row.goods_name"></el-input>
				   </div>
				</template>
			</el-table-column>
            <el-table-column  align="center" width="130px"  label="数量">
				<template slot-scope="scope">
				   <div>
						<el-input disabled @input="cumpMoney(scope)"  size="mini" v-model="scope.row.goods_number"></el-input>
				   </div>
				</template>
			</el-table-column>
             <el-table-column   align="center"     
				label="单价">
				<template slot-scope="scope">
				   <div>
						<el-input @input="cumpMoney(scope)" 
						:disabled="scope.row.is_disabld==1"
						size="mini" v-model="scope.row.price"></el-input>
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center"
				label="入库价格">
				<template slot-scope="scope">
				   <div>
						<el-input disabled size="mini" v-model="scope.row.initial_price"></el-input>
				   </div>
				</template>
			</el-table-column>
            <el-table-column   align="center"  width="130px"   label="金额">
				<template slot-scope="scope">
				   <div>
						<el-input disabled  size="mini" v-model="scope.row.money"></el-input>
				   </div>
				</template>
			</el-table-column>
			
			<el-table-column   align="center"  width="180px"   label="备注">
				<template slot-scope="scope">
				   <div>
						<el-input  size="mini" v-model="scope.row.remark"></el-input>
				   </div>
				</template>
			</el-table-column>
		  
        </el-table>
		
		<div style="display: flex;margin-top: 10px;">
		  <div style="margin-right: 10px;">
			  数量合计：
		       <el-input size="mini" v-model="sumCountTotaled" 
			   disabled
		      style="width:150px;"></el-input>  
		  </div>
		  <div>
			  金额合计：
		      <el-input size="mini" v-model="sumMoneyTotaled" 
			  disabled
		      style="width:150px;"></el-input>
		  </div>
		</div>
		
    </div>
</template>
<script>
	
	import selectCustomer from "@/components/selectCustomer"
    export default {
        components:{
			selectCustomer
        },

        data(){
            return {
                form:{
                    buyer_date:"",
					buyer_person:"",
					supplier:"",
					logistics_number:""
                },
				supperData:[],
				rowData:{},
				order_number:"",
				type:0,
				is_jc:false,
				isUpdateOrderDate:1
            }
        },
		beforeRouteEnter(to,from,next){
			if(from.path=='/buyerSys/buyerDayInfo'){
				to.meta.keepAlive = false
			}else{
				to.meta.keepAlive = true
			}
			next()
		},
		mounted(){
			this.initView()
			this.isUpdateOrderDate = sessionStorage.getItem('isUpdateOrderDate')
			window.addEventListener('keyup', this.handleKeyDown);
		},
		beforeUnmount() {
		    window.removeEventListener('keyup', this.handleKeyDown);
		  },
        methods:{
			handleKeyDown(event){
				// event 中有altKey 是一个bool值
				if(event.key=='s' && event.altKey){
					this.saveGoods()
				}
			},
			initView(){
				this.list = []
				this.form.buyer_date = this.$utils.formatNowDate(2)
				this.form.buyer_person = sessionStorage.getItem('user_name')
				document.title = '采购退货'
				let order_number = this.$route.query.order_number
				if(order_number){
					if(this.$route.query.is_jc==1){
						this.is_jc = true
					}
					this.order_number = order_number
					this.initData(order_number)
				}else{
					this.addBtn()
				}
			},
			initData(order_number){
				this.$post('/buyerSys/getBuyerForOrder',{order_number,type:0,is_jc:this.is_jc},res=>{
					let result = res.data
					if(result.data.length){
						this.form.buyer_date = result.data[0].buyer_date
						this.form.buyer_person = result.data[0].buyer_person
						this.form.supplier = result.data[0].supplier
						this.form.logistics_number = result.data[0].logistics_number
						
						for(let item of result.data){
							let obj = {
								id:item.id,
								goods_name:item.goods_name,
								goods_number:item.goods_number,
								price:item.price,
								money:item.money,
								remark:item.remark,
								order_number:item.order_number,
								code:item.code,
								initial_price:item.price,
								is_disabld:item.is_disabld
							}
							if(item.is_disabld==1){
								this.isDelete = false
							}
							this.list.unshift(obj)
						}
					}
				})
			},
			cumpMoney(scope){
				let index = scope.$index
				let goods_number = scope.row.goods_number
				let price = scope.row.price
				if(goods_number && price){
					this.list[index].money = goods_number * price
				}else{
					this.list[index].money = 0
				}
			},
			getCustomerName(val){
				this.form.supplier = val
			},
			changeCodeInput(scope){
				let index = scope.$index
				let len = this.list.length
				if(len-1 == index){
					this.addBtn()
				}
				let code = scope.row.code
				
				
				let num = 0
				for(let item of this.list){
					if(code==item.code){
						num++
					}
				}
				
				if(num>=2){
					this.list[index].code = ''
					return this.$message.error('不能退相同串号的商品')
				}
				
				let params = {
					code:code,
					is_jc:this.is_jc
				}
				this.$post('/buyerSys/getGoodsForCode',params,res=>{
					let result = res.data
					if(result.data){
						if(result.data.id){
							this.list[index].goods_name = result.data.goods_name
							this.list[index].goods_number = 1
							this.list[index].price = result.data.price
							this.list[index].money = result.data.price
							this.form.supplier= result.data.supplier
							this.list[index].initial_price = result.data.price
							this.list[index].code = this.list[index].code.replace(/ /g,'')
						}
					}else{
						this.$message.error('串号不在库存中')
						this.list[index].code= ''
					}
				})
			},
            saveGoods(){
				let order_number = this.$utils.generateRandomString(2)
				
				let len = this.list.length
				
				if(len==0) return this.$message.error('请添加退货商品')
				if(!this.list[len-1].goods_name){
					this.delLastList()
				}
				
				let cid = sessionStorage.getItem('cid')
				for(let item of this.list){
					item.cid = cid
					if(this.$route.query.order_number){
						item.order_number = this.$route.query.order_number
						item.update_person = sessionStorage.getItem('user_name')
					}else{
						item.order_number = order_number
					}
					if(!item.goods_name) return this.$message.error('商品名称不能为空')
					item.buyer_date = this.form.buyer_date
					item.buyer_person = this.form.buyer_person
					item.supplier = this.form.supplier
					item.logistics_number = this.form.logistics_number
					item.type = 0
					item.initial_price = undefined
				}
				let url = ''
				if(this.is_jc){
					url = '/buyerSysJc/addEditBuyerJc'
				}else{
					url = '/buyerSys/addEditBuyer'
				}
				this.loading_btn = true
				this.$post(url,this.list,res=>{
					let result = res.data
					this.loading_btn = false
					if(result.code == 200){
						// this.list = []
						this.$message.success('操作成功')
						if(this.orderChecked){
							// setTimeout(()=>{
								this.newAdd()
							// },1000)
						}
					}
					
				})
				
			},
            addBtn(){ 
                let obj = {
					id:undefined,
                    goods_name:"",
					goods_number:1,
					price:"",
					money:"",
					code:'',
					remark:"老串号退货",
					initial_price:'',
                }
                this.list.push(obj)
            },
        }
    }
</script>
